<template>
  <!-- 修改密码页面 -->
  <div class="">
    <button @click="popup_new_person_box()" class="click_btn">新增人员</button>
    <div id="pop_message_Layer"></div>

    <div class="Pop_up_box" id="popup_new_person_box">
      <div class="pop_left">
        <div class="theme">用户信息修改</div>
        <div class="box_contents">

          <div class="input_box">
            <p class="message_change_center_top">用户账号</p>
            <input type="text" class="myin" id="old_message_psd" maxlength="12" placeholder="请输入用户账号" />
          </div>
          <div class="input_box">
            <p class="message_change_center_top">用户密码</p>
            <input type="text" class="myin" id="old_message_psd" maxlength="12" placeholder="请输入密码" />
          </div>
          <div class="input_box">
            <p class="message_change_center_top">用户姓名</p>
            <input type="text" class="myin" id="old_message_psd" maxlength="12" placeholder="请输入用户姓名" />
          </div>
          <div class="input_box">
            <p class="message_change_center_top">部门</p>
            <!-- <input type="text" name="" id="new_message_psd" class="myin" maxlength="12" placeholder="请输入用户部门" /> -->
            <select name="" id="" class="myin">
              <option value="大办公室">大办公室</option>
              <option value="台办室">台办室</option>
              <option value="党办室">党办室</option>
              <option value="专职纪检监察">专职纪检监察</option>
              <option value="材器科">材器科</option>
              <option value="保卫科">保卫科</option>
              <option value="人事科">人事科</option>
              <option value="退休管理科">退休管理科</option>
              <option value="技术办">技术办</option>
              <option value="行政科">行政科</option>
              <option value="甲机房">甲机房</option>
              <option value="维修室">维修室</option>
              <option value="乙机房">乙机房</option>
              <option value="中控室">中控室</option>
            </select>
          </div>
          <div class="input_box">
            <p class="message_change_center_top">职称</p>
            <input type="text" name="" id="message_verifypsd" class="myin" maxlength="12" placeholder="请输入职称" />
          </div>
          <div class="input_box">
            <p class="message_change_center_top">人员状态</p>
            <select name="" id="" class="myin">
              <option value="在职">在职</option>
              <option value="离职">离职</option>
              <option value="出差">出差</option>
            </select>
            <!-- <input type="password" name="" id="" class="myin" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="12"/> -->
          </div>

        </div>

        <div style="clear: both;border-bottom: 0.1px solid;margin-top: 20px;"></div>

        <div class="button_box">
          <!-- <div class="button" @click="closeBox()" style="margin-right: 60px"> -->
          <!-- <button class="pop_btn">返回</button> -->
          <button class="btn btn-default" @click="closeBox()">返 回</button>
          <!-- </div> -->
          <!-- <div class="button" @click="AmendPsd()"> -->
          <!-- <button class="pop_btn">确认修改</button> -->
          <button class="btn btn-success" @click="AmendPsd()">确认</button>
          <!-- </div> -->
        </div>
      </div>
      <div class="pop_right">
        <!-- <img src="@/assets/vote/PopPic2.jpg" alt="" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { encryption, decrypt } from "@/utils";
import api from "@/api";
export default {
  name: "PopAdmin",
  setup() {
    /*点击弹出按钮*/
    function popup_new_person_box() {
      let popup_new_person_box = document.getElementById("popup_new_person_box");
      let pop_message_Layer = document.getElementById("pop_message_Layer");
      let old_message_psd = document.getElementById("old_message_psd");
      let new_message_psd = document.getElementById("new_message_psd");
      let message_verifypsd = document.getElementById("message_verifypsd");
      (message_verifypsd.value = ""), //清空输入框
        (new_message_psd.value = ""); //清空输入框
      old_message_psd.value = ""; //清空输入框
      popup_new_person_box.style.display = "block";
      pop_message_Layer.style.display = "block";
      //本质上就是 将页面效果设置为可见
    }
    /*点击关闭按钮*/
    function closeBox() {
      let popup_new_person_box = document.getElementById("popup_new_person_box");
      let pop_message_Layer = document.getElementById("pop_message_Layer");
      let old_message_psd = document.getElementById("old_message_psd");
      let new_message_psd = document.getElementById("new_message_psd");
      let message_verifypsd = document.getElementById("message_verifypsd");
      (message_verifypsd.value = ""), //清空输入框
        (new_message_psd.value = ""); //清空输入框
      old_message_psd.value = ""; //清空输入框
      popup_new_person_box.style.display = "none";
      pop_message_Layer.style.display = "none";
      //本质效果就是 将页面效果隐藏
    }
    //发送数据给后端 进行添加管理员
    function AmendPsd() {
      let old_message_psd = document.getElementById("old_message_psd").value;
      let new_message_psd = document.getElementById("new_message_psd").value;
      // var message_verifypsd = document.getElementById("message_verifypsd").value;
      let message_verifypsd = document.getElementById("message_verifypsd").value;
      console.log(new_message_psd, message_verifypsd)
      // var mydata = {
      //   oldpassword: old_message_psd,
      //   newpassword: new_message_psd,
      //   confirmPassword: message_verifypsd,
      // };
      if (
        old_message_psd == "" ||
        new_message_psd == "" ||
        message_verifypsd == ""
      ) {
        alert("请填入对应信息，请勿为空！");
      }
      else if (new_message_psd != message_verifypsd) {
        alert("两次密码不相同，请重试！");
      }
      else {

        old_message_psd = encryption(document.getElementById("old_message_psd").value);
        new_message_psd = encryption(document.getElementById("new_message_psd").value);//密码加密
        message_verifypsd = encryption(document.getElementById("message_verifypsd").value);//密码加密
        var mydata = new FormData();
        mydata.append("oldPassword", old_message_psd)
        mydata.append("newPassword", new_message_psd);
        mydata.append("confirmPassword", message_verifypsd);
        api
          .amendPsd(mydata)
          .then((res) => {
            if (res.data.status == 200) {
              alert("修改成功");
              window.location.href = "/AdminLogin";
            } else {
              alert(res.data.msg);
            }
          })
          .catch((res) => {
            console.log(res);
            alert("数据问题，请咨询管理员！");
          });
        closeBox();
      }
    }
    return {
      popup_new_person_box,
      closeBox,
      AmendPsd,
    };
  },
  methods: {
    sing() {
      console.log("我是子组件的方法");
    },
  },
};
</script>

<style scoped>
.box {
  z-index: 1;
}

/*背景层 作为阴影部分 遮挡信息*/
.click_btn {
  background: none;
  border: none;
  /* padding: 18px 38%; */
  /* 悬浮鼠标样式 */
  cursor: pointer;
}

#pop_message_Layer {
  /* 设置display 为none 不显示 */
  display: none;
  background-color: #c2c2c2;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  /* 只支持IE6、7、8、9 */
  cursor: auto;
}

/*弹出层  弹出对应的信息*/
/* 2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示; */
#popup_new_person_box {
  /* 设置display 为none  不显示 */
  display: none;
  background-color: #ffffff;
  background-image: "@/assets/vote/beijing.png";
  z-index: 11;
  /* 设置弹出层的显示大小，并且居中显示; */
  width: 520px;
  height: 580px;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  cursor: auto;
  border-radius: 10px;
}

#popup_new_person_box .close {
  text-align: right;
  margin-right: 5px;
  background-color: #f8f8f8;
}

/*关闭按钮*/
#popup_new_person_box .close a {
  text-decoration: none;
  color: #2d2c3b;
}

.Pop_up_box {
  width: 760px;
  height: 100%;
  text-align: center;
  /* width: 950px; */
  overflow: hidden;
}

/* .popleft {
  float: left;
  margin-top: 5.5%;
} */
/* .pop_right {
  float: right;
} */
.theme {
  font-family: FZYTK--GBK1-0;
  font-size: 35px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb;

  margin-bottom: 25px;
  /* margin-left: 100px; */

  margin-top: 25px;
  border-bottom: 1px solid #b5b5b5;
  height: 60px;
}

.box_contents {
  font-family: AdobeHeitiStd-Regular;
  /* font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb; */

  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.myin {
  border: 1px solid #b6b6b6;
  /* border-top: 0;
  border-left: 0;
  border-right: 0; */
  /* 设置outline 轮廓样式 */
  outline: none;
  /* 背景为透明无颜色 是background-color 的默认值 */
  background: transparent;
  /* 设置轮廓的宽度 */
  outline: medium;
  /* width: 200px; */
  font-size: 23px;
  height: 35px;
  width: 260px;
  font-size: 16px;
  padding-left: 5px;



}

.button {
  display: inline-block;
  width: 171px;
  height: 57px;
  border: solid 1px #78aefe;
  /* margin-left: 170px;
  margin-top: 40px; */
  /* 水平居中 */
  text-align: center;
  /* 设置行高 */
  line-height: 62px;
  cursor: pointer;
}

.pop_btn {
  border: none;
  background: none;
  font-family: AdobeHeitiStd-Regular;
  color: #669bfb;
  font-size: 25px;
  font-weight: normal;
  font-stretch: normal;
  /* 设置字间距 */
  letter-spacing: 0px;

  cursor: pointer;
  position: relative;
  bottom: 5px;
}

/* 消除button 的点击样式 */
button:focus {
  outline: none;
}

.button_box {
  /* margin-left: 30px; */
  margin-top: 30px;
  display: flex;
  margin-right: 50px;
  justify-content: flex-end;
}

.right img {
  height: 500px;
}

.message_change_center_top {
  display: block;
  width: auto;
  width: max-content;
  height: auto;
  margin: 0;
  text-align: center;
  line-height: normal;
  letter-spacing: 1px;
}

.btn {
  width: 81px;
  margin-right: 10px;
}

.input_box {
  font-size: 16px;
  margin: 2px 0px;
}
</style>